class Food
{
    
    constructor(elm)
    {
        this.elm = document.querySelector(elm)
        this.len = 20
        this.foodObj = null
        this.foodX = 0
        this.foodY = 0
        this.init()
    }

    init(){
        this.show()
    }
    show()  {
        let divObj = document.createElement('div')

        divObj.style.width = `${this.len}px`
        divObj.style.height = `${this.len}px`
        divObj.style.background = `white`
        divObj.style.position = `absolute`
        this.foodObj = divObj
        document.querySelector('.map').appendChild(divObj)
        this.move()
    }
    move(){
        
        let foodXMax = (this.elm.clientWidth - this.len)/this.len 
        let foodYMax = (this.elm.clientHeight - this.len)/this.len

        this.foodX = Math.floor(Math.random()*(foodXMax+1)) *this.len
        this.foodY = Math.floor(Math.random()*(foodYMax+1)) * this.len

        this.foodObj.style.left = `${this.foodX}px`
        this.foodObj.style.top = `${this.foodY}px`
    }
 
}
export default Food
